<%@page import="java.util.ArrayList"%>
<%@page import="com.entity.Student"%>
<%@page import="java.util.List"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.LinkedHashMap"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
	String action = (String)request.getAttribute("action");
	Student std = (Student)request.getAttribute("student");
	if( std == null ){
		std = new Student();
	} 
	String actionStr = "添加";
	String nextAction = "save";
	if( "modify".equals(action)){
		actionStr = "修改";
		nextAction = "update";
	}
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="<%=request.getContextPath()%>/bootstrap/4.1.3/css/bootstrap.min.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/popper.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<style type="text/css">
html,
body {
  height: 100%;
}
body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}
</style>
<script type="text/javascript">
	$(function(){
		$(".sex-btn").on("click",function(e){
			var btn = e.currentTarget;
			$(btn).siblings().removeClass("active");
			$(btn).addClass("active");
			$("[name='sex']").val($(btn).data("value"));
		});
		
		$(".like-btn").on("click",function(e){
			var btn = e.currentTarget;
			if($(btn).hasClass("active")){
				$(btn).removeClass("active");
				$(btn).children("input").remove();
			}
			else{
				$(btn).addClass("active");
				var input = $("<input type='hidden' name='like'>")
				$(input).val($(btn).data("value"));
				$(btn).append(input);
			}
		});
		
		var student = '<%=std.getJsonStr()%>';
		student = JSON.parse(student);
		
		
		if(student.number){
			$("[name='oldNumber']").val(student.number);
			$("[name='number']").val(student.number);
		}
		if(student.name){
			$("[name='name']").val(student.name);
		}
		if(student.sex){
			$("[name='sex']").val(student.sex);
			$(".sex-btn").each(function(){
				if($(this).html()==student.sex){
					$(this).addClass("active");
				}else{
					$(this).removeClass("active");
				}
			});
		}
		
		if(student.like){
			$(".like-btn").each(function(){
				if ( $.inArray( $(this).html() ,student.like ) > -1 ){
					$(this).addClass("active");
					var input = $("<input type='hidden' name='like'>")
					$(input).val($(this).data("value"));
					$(this).append(input);
				}
			});
		}

		
	});
	
	function save(){
		var f = true;
		
		f = checkNull($("[name='number']"),"学号不能为空！");
		f = checkNull($("[name='name']"),"姓名不能为空！");
		if(f){
			student_detail.submit();
		}
	}
	
	function checkNull(obj,message){
		if(!$(obj).val()){
			var div = $("<div>")
						.addClass("alert")
						.addClass("col-6 mb-0")
						.addClass("alert-danger");
			$(div).html("<strong>错误！</strong>"+message);
			$(obj).parent().after(div);
			return false;
		}
		return true;
	}
	
</script>
<title>信息列表</title>
</head>



<body >
	
	<div class="card " style="height: 100%;width: 100%;">
	<form class="form" name="student_detail" method="post"
		action="student.do?action=<%=nextAction%>">
		<input type="hidden" name="oldNumber">
		<div class="card-header bg-primary text-white">
			<div class="container">
				<div class="row">
					<div class="col-sm-12 col-md-6">
					<h3><%=actionStr %>学生详细信息</h3>
					</div>
					<div class="col-sm-12 col-md-6">
						<button class="btn btn-success" type="button"
							onclick="save()">保存</button>
					</div>
				</div>
			</div>
		</div>
		<div class="card-body ">
			<div class="container">
				<div class="row mb-2">
					<div class="col-3 text-right">
						<label class="col-form-label" for="number">学号</label>
					</div>
					<div class="col-3">
						<input class="form-control" name="number">
					</div>
				</div>
				<div class="row mb-2">
					<div class="col-3 text-right">
						<label class="col-form-label" for="name">姓名</label>
					</div>
					<div class="col-3">
						<input class="form-control" name="name" >
					</div>
				</div>
				<div class="row mb-2">
					<div class="col-3 text-right">
						<label class="col-form-label" for="sex">性别</label>
					</div>
					<div class="col-3">
						<input type="hidden" value="男" name="sex">
						<div class="btn-group col-12">
   							<button class="btn btn-outline-primary active col-6 sex-btn" 
   								type="button" data-value="男">男</button>
   							<button class="btn btn-outline-primary col-6 sex-btn" 
   								type="button" data-value="女">女</button>
  						</div>
					</div>
				</div>
				<div class="row mb-2">
					<div class="col-3 text-right">
						<label class="col-form-label" for="like">兴趣爱好</label>
					</div>
					<div class="col-9 ">
						<div class="btn-group-toggle">
   							<button class="like-btn btn btn-outline-primary" 
   								type="button" data-value="篮球">篮球</button>
   							<button class="like-btn btn btn-outline-secondary" 
   								type="button" data-value="足球">足球</button>
   							<button class="like-btn btn btn-outline-success" 
   								type="button" data-value="音乐">音乐</button>
   							<button class="like-btn btn btn-outline-info" 
   								type="button" data-value="美术">美术</button>
   							<button class="like-btn btn btn-outline-warning" 
   								type="button" data-value="摄影">摄影</button>
   							<button class="like-btn btn btn-outline-dark" 
   								type="button" data-value="阅读">阅读</button>
  						</div>
					</div>
				</div>
			</div>
		
		</div>
		<div class="card-footer bg-info text-center">
			<p class="mt-2 mb-2 text-white">&copy; 2020-2021</p>
		</div>
	</form>
	</div>

	
</body>
</html>